<!DOCTYPE html>
<!--
HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
-->

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<style>
	.class1{
	  background: yellow;
	  color: red;
	}
	</style>
	
	<body>
		<div id="app">
		  <label for="r1">修改颜色</label>
		  <input type="checkbox" v-model="use" id="r1">
		  <br><br>
		  <div v-bind:class="{'class1': use}">
		    v-bind:class 指令
		  </div>
		</div>
		    
		<script>
		new Vue({
		    el: '#app',
		    data:{
		      use: false
		  }
		});
		</script>
			
	</body>
</html>
